<template>
  <div class="left-card-1">
    <HeaderTitle :imgUrl="`reserveStatistics-img`">
      <div class="expire-box">
        <el-select v-model="type" placeholder="请选择" class="">
          <el-option label="123" value="1" />
          <el-option label="456" value="2" />
        </el-select>
      </div>
    </HeaderTitle>

    <div class="table-box">
      <el-table
        :data="tableData"
        border
        stripe
        table-layout="fixed"
        header-row-class-name="card1-table-header-class"
        cell-class-name="card1-table-cell-class"
        :style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
        :header-row-style="headerRowStyle"
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
      >
        <el-table-column>
          <template #header>
            <div>类型</div>
          </template>
          <template #default="{ row }">
            <div class="cell-type">{{ row.type }}</div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <div>资源量</div>
          </template>
          <template #default="{ row }">
            <div class="cell-num-text">{{ row.sourceNum }}</div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <div>储量</div>
          </template>
          <template #default="{ row }">
            <div class="cell-num-text">{{ row.reservesNum }}</div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <div>单位</div>
          </template>
          <template #default="{ row }">
            <div class="cell-unit">{{ row.unit }}</div>
          </template>
        </el-table-column>
      </el-table>

      <div class="card-box">
        <div class="title-item">铁矿</div>
        <div class="dec-item">
          <div class="flex-between">
            <div class="data-item">9499305.16</div>
            <div class="unit-item">千吨</div>
          </div>
          <div>资源量</div>
        </div>
        <div class="dec-item">
          <div class="flex-between">
            <div class="data-item">9499305.16</div>
            <div class="unit-item">千吨</div>
          </div>
          <div>储量</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
const tableData = ref([
  { type: '煤矿', sourceNum: '22678452.06', reservesNum: '2421997.22', unit: '千吨' },
  { type: '铁矿', sourceNum: '9702606.86', reservesNum: '2190791.47', unit: '吨' }
]);

const type = ref('1');

function headerRowStyle({ row, rowIndex }) {
  return {
    background: 'linear-gradient(-90deg,rgba(19,87,198,0.12) 0%, rgba(24,82,168,0.36) 100%)',
    borderBottom: '1px solid rgb(0, 162, 255)',
    color: 'white'
  };
}
function headerCellStyle({ row, column, rowIndex, columnIndex }) {
  return {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    padding: '0px',
    borderRight: '1px solid rgb(0, 162, 255)',
    borderBottom: '1px solid rgb(0, 162, 255)'
  };
}
function rowStyle({ row, rowIndex }) {
  return {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    borderBottom: '1px solid rgb(0, 162, 255)',
    color: 'white'
  };
}
function cellStyle({ row, column, rowIndex, columnIndex }) {
  return {
    padding: '0px',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    borderRight: '1px solid rgb(0, 162, 255)',
    borderBottom: '1px solid rgb(0, 162, 255)'
  };
}

onMounted(() => {
  axios.get('/api/getMineralList').then(res => {
    tableData.value = res.data?.data || [];
  });
});
</script>
